import React from 'react';
// import { Table } from 'antd';
import Page from 'components/common/Page';
import { model } from 'utils/model';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import moment from 'moment';
// import { ymd } from 'configs/constants';
import SearchBar from './SearchBar';
import fields from './fields';

const initOption = (option = []) => {
    const xAxisData = [];
    const yAxisData = [];
    option.forEach(item => {
        xAxisData.push(moment(item.timeFrame).format('HH:mm:ss'));
        yAxisData.push(item.val);
    });
    return {
        title: {
            left: 'center',
            text: '时间范围内数据变化'
        },
        xAxis: {
            type: 'category',
            data: xAxisData
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: yAxisData,
            type: 'line'
        }]
    };
};

@model('lineData')
class UserManage extends React.Component {
  constructor(props) {
    super(props);
    this.timer = null;
    this.state = {
      visible: false,
      myChart: null,
      monitorData: props.monitorData || {}
    };
  }

  componentDidMount() {
    var myChart = echarts.init(document.getElementById('main'));
    this.setState({ myChart });

    // const option = initOption();
    // myChart.setOption(option);
  }
  componentWillReceiveProps(next){
      const { myChart } = this.state;
      if(next.monitorData !== this.props.monitorData){
          const option = initOption(next.monitorData);
          myChart.setOption(option);
      }
  }
// 扩展字段
    extraFields() {
        const extra = [];
        return fields.concat(extra);
    }
  
  render() {
    const { 
        search,
        // config,
        // goPage,
        getMonitorData,
        // loading,
        equipList,
        getEquipList,
        updateState,
        templateList,
        updateSearch,
        queryDataTemplateItems
    } = this.props;
    const searchProps = {
        search,
        equipList,
        updateState,
        getEquipList,
        templateList,
        queryDataTemplateItems,
        onSearch: (params) => {
            updateSearch(params);
            getMonitorData(params);
        }
    };
    // const { pagination, list } = config;
    // const tableProps = {
    //     pagination: {
    //       ...pagination,
    //       onChange: (current) => {
    //         goPage(current);
    //         getList();
    //       }
    //     },
    //     // scroll: {
    //     //     x: 1600
    //     // },
    //     loading: loading.list,
    //     rowKey: (record, index) => index,
    //     dataSource: list,
    //     columns: this.extraFields()
    //   };
    return (
      <Page inner>
        <div>
          <SearchBar {...searchProps} />
          {/* <Table {...tableProps} style={{marginTop: 20}} /> */}
          <div id="main" style={{ width: '100%', height: 400, marginTop: 20 }} />
        </div>
      </Page>
    );
  }
}


export default UserManage;
